<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        /*
            get 请求不保密，post 保密请求
            url有长度限制，理论上get请求有请求参数数量限制， post没有
            post 可以规定各种类型参数  get 请求一般表示为字符串

            post 参数通过 send 方法发送出去，post 参数的格式需要和后台沟通好，通过 xhr.setRequestHeader 方法设定参数格式

            xhr.setRequestHeader() 必须写在open方法之后，send方法之前

            前后端工作 -->  后端写好接口 --> 接口文档（url请求地址 请求方式 请求参数 参数类型 身份验证 返回值）--> 根据接口文档写ajax  $.ajax请求 --> 调试工作
        */

        var xhr = new XMLHttpRequest();
        xhr.onreadystatechange = function () {
            if (xhr.readyState == 4 && xhr.status == 200) {
                console.log(xhr.responseText);
                var res = JSON.parse(xhr.responseText);
                if (res.code == 'success') {
                    console.log('你成功了');
                }
            }
        }

        // post请求数据
        xhr.open('POST', 'http://bufantec.com/api/test/user/save');
        // 请求参数格式  text/plain  application/json  application/x-www-form-urlencoded  multipart/form-data文件
        xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded');
        // form 形式的数据  name=value&name1=value1...
        // 参数序列化   qs.js
        var obj = {
            name: "李白", // 昵称
            age: 14,
            sex: 0,
            tel: 12346578,
            address: "长安城东北角",
            school: "长安吟诗学院",
            username: "57", // 登录名
            password: 123456
        }
        var str = '';
        for (const i in obj) {
            str += '&' + i + '=' + obj[i];
        }
        str = str.slice(1);
        xhr.send(str);
    </script>
</body>
</html>